<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { page } from "$app/stores";
  import { isEmpty, isUndefined } from "@util/checker";
  import { ENV_VARS } from "@store/conf";
  import "../app.css";
  import Header from "@routes/Header.svelte";
  import Footer from "@routes/Footer.svelte";
  import { alerts$ } from "@store/global"
  import Alert from "@component/alerts/Alert.svelte" 
  import Spinner from "@component/Spinner.svelte";

  $: page_title = `${ENV_VARS.PUBLIC_SITE_NAME}${
    isUndefined($page.data.title) ? "" : " - " + $page.data.title
  }`;
</script>

<svelte:head>
  <title>{page_title}</title>
</svelte:head>
<div class="flex flex-col w-full h-screen">
  <div class="w-full h-16"><Header /></div>
  <div class="flex-grow w-full">
    <slot />
  </div>
  <div class="w-full h-16"><Footer /></div>
</div>

{#if $alerts$.length > 0}
  <ul class="w-96 h-1/2 flex flex-col justify-end items-center bottom-4 right-0 absolute">
    {#each $alerts$ as { type, message }, idx }
      <!-- svelte-ignore a11y-missing-attribute -->
      <Alert {message} {type} {idx}  />
    {/each}
  </ul>
{/if}
<Spinner />